<template>
	<view class="body" v-if="show">
		<view class="refund-type">
			<view class="cont">
				<view class="type">
					<view class="title">{{detail.log[length - 1].operate_content}}</view>
					<view class="refuse-reason" v-if="detail.refund_refuse_reason && detail.refund_status == 2">{{ detail.refund_refuse_reason }}</view>
					<view class="time">{{detail.log[length - 1].createtime}}</view>
				</view>
				<view class="price"><text>￥</text>{{Number(detail.refund_money).toFixed(2)}}</view>
			</view>
		</view>

		<view class="schedule">
			<uni-collapse>
				<uni-collapse-item title="退款进度" :open="true">
					<view class="content">
						<uni-steps :options="statusList" active-color="#333333" active-icon="smallcircle-filled"
							:active="length - 1" direction="column" />
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>

		<!-- 收货信息 -->
		<view class="receive" v-if="detail.receive_name != null">
			<view class="r-title">商家收货信息</view>
			<view class="r-cont">
				<view class="r-item">					
					<view class="r-text">收货人姓名: {{detail.receive_name}}</view>
				</view>
				<view class="r-item">
					<view class="r-text">联系方式: {{detail.receive_mobile}}</view>
				</view>
				<view class="r-item">
					<view class="r-text">商家地址: {{detail.receive_address}}</view>
				</view>
			</view>
		</view>

		<view class="goodsDetail">
			<view class="goods">
				<view class="item">
					<view class="img">
						<image :src="detail.goods.spec.spec_image==''? detail.goods.image : detail.goods.sku_image"
							mode="scaleToFill"></image>
					</view>
					<view class="content">
						<view class="top">
							<view class="title">{{ detail.goods.goods_name }}</view>
							<view class="price"> <text>￥</text> {{ detail.goods.goods_price }}</view>
						</view>
						<view class="center">
							<view class="type">
								<view>
									{{ detail.goods.goods_attr ? detail.goods.goods_attr :'' }}
								</view>
							</view>
							<view class="num">x{{ detail.goods.total_num }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="refundDetail">
				<view class="refundItem">
					<view class="title">退款原因</view>
					<view class="price">{{detail.refund_reason}} </view>
				</view>
				<view class="refundItem">
					<view class="title">退款金额</view>
					<view class="price">￥{{detail.refund_money}}</view>
				</view>
				<view class="refundItem">
					<view class="title">申请件数</view>
					<view class="price">{{detail.goods.total_num}}</view>
				</view>
				<view class="refundItem">
					<view class="title">申请时间</view>
					<view class="price">{{detail.createtime}}</view>
				</view>
				<view class="refundItem">
					<view class="title">退款编号</view>
					<view class="price">{{detail.refund_no}} <text @click="copy">复制</text> </view>
				</view>
				<view class="refundItem" v-if="detail.refund_explain != ''">
					<view class="title">退款说明</view>
					<view class="price">{{detail.refund_explain}}</view>
				</view>
				<view class="refundItem" style="display: block;" v-if="detail.refund_images.length != 0">
					<view class="title">退款凭证</view>
					<view class="price" style="display: flex;flex-wrap: wrap;">
						<block v-for="(img,Rindex) in detail.refund_images" :key="Rindex">
							<image style="width: 30%;height: 200rpx;;margin: 16rpx 16rpx 0 0;" :src="img" mode=""
								@click="showBigImg(Rindex)"></image>
						</block>
					</view>
				</view>
				<block v-if="detail.express_company != null">
					<view class="refundItem">
						<view class="title">物流公司</view>
						<view class="price">{{detail.express_company}} </view>
					</view>
					<view class="refundItem">
						<view class="title">物流单号</view>
						<view class="price">{{detail.express_no}}</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailId: 0,
				detail: {},
				statusList: [],
				show: false,
				length: 0,
				price: 0,
			}
		},
		onLoad(options) {
			this.detailId = options.id
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			getDetail() {
				let _this = this
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				_this.$api.get('mall.refund/detail', {
					id: _this.detailId
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						_this.show = true
						_this.detail = res.data
						_this.length = res.data.log.length
						_this.price = res.data.goods.price

						let list = res.data.log.map(item => {
							return {
								title: item.operate_content,
								desc: item.createtime
							}
						})

						_this.statusList = list
					} else {
						uni.showModal({
							title: '提示',
							content: res.msg,
							showCancel: false,
							cancelText: '',
							confirmText: '确认',
							success: res => {
								uni.navigateBack({
									delta: 1
								});
							},
							fail: () => {},
							complete: () => {}
						});
					}
				})
			},
			/**
			 * 复制
			 */
			copy() {
				uni.setClipboardData({
					data: this.detail.refund_no
				});
			},
			showBigImg(index) {
				uni.previewImage({
					current: index,
					urls: this.detail.refund_images
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
		padding-bottom: 40rpx;
	}

	.body {
		padding: 0 24rpx;
	}

	/* 退款状态 */
	.refund-type {
		width: calc(100vw - 112rpx);
		padding: 50rpx 32rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		margin-top: 24rpx;
	}

	.refund-type .r-img {
		width: 62rpx;
		height: 62rpx;
		margin-right: 26rpx;
	}

	.refund-type .r-img image {
		width: 62rpx;
		height: 62rpx;
	}

	.refund-type .cont {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 32rpx;
		font-weight: bold;
	}

	.refund-type .cont .time {
		font-size: 24rpx;
		color: #999999;
		font-weight: 400;
		margin-top: 4rpx;
	}

	.refund-type .cont .price {
		font-size: 34rpx;
	}

	.refund-type .cont .price text {
		font-size: 24rpx;
	}

	/* 退款进度 */
	.schedule {
		width: calc(100vw - 95rpx);
		padding: 32rpx 32rpx 32rpx 17rpx;
		margin: 24rpx 0;
		box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
		background-color: #FFFFFF;
		border-radius: 24rpx;
		position: relative;
	}

	.schedule .content {
		margin-top: 12rpx;
	}

	.uni-collapse-item__title.uni-collapse-item-border,
	.uni-collapse-item__wrap-content.uni-collapse-item--border {
		border: none !important;
	}

	.uni-collapse-item__title-box {
		height: 39rpx !important;
		line-height: 39rpx !important;
	}

	.uni-steps__column-text {
		border: none !important;
	}

	.uni-collapse-item__title-text {
		font-size: 28rpx;
		font-weight: bold;
	}

	.uni-steps__column-title {
		font-size: 24rpx;
		font-weight: bold;
	}

	.uni-steps__column-line {
		opacity: .1 !important;
	}

	.uni-steps__column-circle {
		background-color: #000000 !important;
	}

	.uniui-smallcircle-filled {
		color: #000000 !important;
		background: #000000;
		border-radius: 50%;
	}

	/* 收货信息 */
	.receive {
		background-color: #FFFFFF;
		padding: 32rpx;
		box-shadow: 0rpx 2rpx 16rpx 0rpx rgba(0, 0, 0, 0.06);
		border-radius: 24rpx;
	}

	.receive .r-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
	}

	.receive .r-cont image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 14rpx;
	}

	.r-item {
		display: flex;
		align-items: center;
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #666666;
	}

	/* 退款商品详情 */
	.goodsDetail {
		width: calc(100vw - 112rpx);
		padding: 40rpx 32rpx;
		background-color: #FFFFFF;
		box-shadow: 0rpx 2rpx 50rpx 0rpx rgba(0, 0, 0, 0.08);
		border-radius: 24rpx;
		margin-top: 32rpx;
	}

	/* 商品详情 */
	.goods {
		padding-bottom: 7rpx;
		border-bottom: 2rpx solid #E5E5E5;
		position: relative;
	}

	.goods::before,
	.goods::after {
		content: "";
		width: 48rpx;
		height: 48rpx;
		border-radius: 50%;
		background-color: #F5F5F5;
		position: absolute;
		bottom: -24rpx;
	}

	.goods::before {
		left: -50rpx;
	}

	.goods::after {
		right: -50rpx
	}

	.item {
		display: flex;
		justify-content: space-between;
		padding: 40rpx 0;
		border-bottom: 1rpx solid #f9f6f6;
	}

	.item:first-of-type {
		padding-top: 0;
	}

	.item:last-of-type {
		border-bottom: none;
	}

	.item .img {
		width: 150rpx;
		height: 150rpx;
	}

	.item .img image {
		width: 100%;
		height: 100%;
		border-radius: 8rpx;
	}

	.item .content {
		width: calc(100vw - 286rpx);
	}

	.item .content .top,
	.item .content .center {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
	}

	.item .top .title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		overflow: hidden;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}

	.item .top .price {
		font-size: 24rpx;
	}

	.item .top .price text {
		font-size: 20rpx;
	}

	.item .content .center {
		font-size: 20rpx;
		color: #999999;
		margin-bottom: 21rpx;
	}

	.item .content .bottom text {
		font-size: 20rpx;
		color: #000000;
		padding: 0 8rpx;
		border: 1rpx solid #000000;
		border-radius: 4rpx;
		margin-right: 12rpx;
	}

	/* 退款详情 */
	.refundDetail {
		padding-top: 48rpx;
	}

	.refundItem {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx;
		font-weight: bold;
		margin-bottom: 16rpx;
	}

	.refundItem .price {
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
	}

	.refundItem .price text {
		color: #333333;
		margin-left: 16rpx;
		font-weight: bold;
	}

	.refuse-reason {
		color: red;
		font-size: 24rpx;
		margin-top: 4rpx;
	}
</style>